<template>
  <div class="w-1200-container">
    <Bread :nowTitle="breadTitle" />

    <div class="info-desc">
      <h6> {{ breadTitle }} </h6>
      <div class="sub">
        <div class="sub-line">
          <span class="sub-line-item">
            企业数量： <span class="text-red-500 font-bold"> 10 </span> 家企业
          </span>
          <span class="sub-line-item"> 发布机构： 江西省科技厅 </span>
        </div>

        <div class="sub-line">
          <span class="sub-line-item"> 发布时间： 2021-09-13 </span>
        </div>
      </div>
    </div>
    <div class="table-cotainer">
      <el-table
        :data="tableData"
        class="talbe-box"
        :headerCellStyle="{ ...headCellStyle }"
        :cellStyle="cellStyle"
      >
        <el-table-column type="index" label="序号" width="171">
        </el-table-column>
        <el-table-column prop="companyname" label="名称"> </el-table-column>
        <el-table-column prop="fileds" label="领域">
          <template slot-scope="scope">
            {{ filedLabels(scope.row.fileds) }}
          </template>
        </el-table-column>
        <el-table-column prop="cityId" label="地区"> </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import Breadcrumb from "@/components/Breadcrumb";
import Bread from "@/components/Bread";
export default {
  components: {
    Breadcrumb,
    Bread,
  },
  data() {
    return {
      // 表格 单元格样式
      cellStyle: {
        textAlign: "center",
      },
      // 表格 头部（th）单元格样式
      headCellStyle: {
        textAlign: "center",
        backgroundColor: "#f1f3fb",
      },

      // 领域字典表
      // 大数据、智慧农业、电子信息
      filedTypes: [
        {
          dictLabel: "生物医药",
          dictValue: "1",
        },
        {
          dictLabel: "大数据",
          dictValue: "2",
        },
        {
          dictLabel: "智慧农业",
          dictValue: "3",
        },
        {
          dictLabel: "电子信息",
          dictValue: "4",
        },
        {
          dictLabel: "光电信息",
          dictValue: "5",
        },
        {
          dictLabel: "太阳能",
          dictValue: "6",
        },
      ],

      // 数据列表
      tableData: [
        {
          companyname: "江西裕丰智能农业科技有限公司",
          fileds: [1, 3, 5],
          cityId: 2,
        },
        {
          companyname: "江西迅特通信技术有限公司",
          fileds: [2, 3],
          cityId: 4,
        },
        {
          companyname: "江西豪斯特汽车零部件有限公司",
          fileds: [1, 4],
          cityId: 5,
        },
        {
          companyname: "江西美森新能源有限公司",
          fileds: [6, 8],
          cityId: 1,
        },
      ],
      queryParams: {
        pageSize: 10,
        pageNum: 1,
        year: 2020,
        type: "unicorn",
      },

      // 路由中的 companyname 与 companyTypes 中元素进行匹配
      propName: "companyname",
      companyTypes: [
        {
          dictValue: "unicorn",
          dictLabel: "独角兽企业",
          queryParams: { num: 1, size: 1 },
        },
        {
          dictValue: "gazelle",
          dictLabel: "瞪羚企业",
          queryParams: { num: 2, size: 2 },
        },
      ],
      yearTypes:[
        {
          dictLabel: '2020',
          dictValue: '2020',
        },
        {
          dictLabel: '2021',
          dictValue: '2021',
        }
      ],
      activeIndex: -1,
      activeYearIndex: -1
    };
  },
  computed: {
    breadTitle() {
      let type = this.companyTypes[this.activeIndex]['dictLabel']
      let year = this.queryParams.year
      return year + '年度' + type + '榜单';
    },

    filedLabels() {
      /**
       * @param {Array} filedIds
       * @description  根据 filedIds 返回相应的 领域名称,并 最终返回 字符串形式
       * @return { String }
       */
      return (filedIds) => {
        let resArr = [];
        filedIds.forEach((item) => {
          let findItem = this.filedObj(parseInt(item));
          findItem && resArr.push(findItem.dictLabel);
        });
        return resArr.join("、");
      };
    },
    filedObj() {
      /**
       * @param {number} filedId
       * @description  根据 filedId 返回相应的 领域对象
       * @return { Object }
       */
      return (filedId) => {
        let findItem = this.filedTypes.find((item) => {
          return parseInt(item.dictValue) === filedId;
        });
        return findItem;
      };
    },
  },
  created() {
    this.getInfo();
  },
  methods: {
    /**
     * @description 在对象数组中寻找到 相应目标值,返回 -1 或者其他
     * @param {Array} sourceList  源数组
     * @param {String} 依照对象的属性名
     * @param {String|number} 目标值
     * @return {number} 
     */
    findArrIndex(sourceList, propName, targetValue) {
      let activeIndex = -1;
      if (targetValue && sourceList.length>0) {
        activeIndex = sourceList.findIndex((item) => {
          return item[propName] === targetValue;
        });
      }
       return activeIndex
    },
    initQueryparams(companyName, year) {
      if (companyName) {
        this.queryParams.type = companyName;
      }
      if (year) {
        this.queryParams.year = year;
      }
    },
    getInfo() {
      let { type, year } = this.$route.query
      this.activeIndex = this.findArrIndex(this.companyTypes, 'dictValue', type );
      this.activeYearIndex = this.findArrIndex(this.yearTypes, 'dictValue', String(year) );
      if(this.activeIndex==-1 || this.activeYearIndex == -1){
        this.$router.push({
          path: '/404'
        })
        return 
      }
      
      this.initQueryparams(type,year)
    },
  },
};
</script>

<style lang="scss" scoped>
.info-desc {
  background-color: #f1f3fb;
  @apply p-8 text-t333 my-6;

  .sub {
    @apply mt-4 leading-8;

    .sub-line {
      @apply text-t666;
      .sub-line-item {
        min-width: 180px;
        @apply inline-block mr-2;
      }
    }
  }
}
.table-cotainer {
  width: 1200px;
  padding: 5px;

  .talbe-box {
    @apply rounded-md shadow-md;
  }
}
</style>